<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="报修详情"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="">
        <fui-tabs
          @change="change"
          :tabs="tabs"
          isDot
          scroll
          alignLeft
          :short="false"
        ></fui-tabs>
      </view>
      <view class="scroll-view">
        <warrantyCheck v-if="checkIndex === 0"></warrantyCheck>
        <faultMessage v-else-if="checkIndex === 1"></faultMessage>
        <service v-else-if="checkIndex === 2"></service>
        <maintenance v-else-if="checkIndex === 3"></maintenance>
        <workload v-else-if="checkIndex === 4"></workload>
        <parts v-else-if="checkIndex === 5"></parts>
      </view>
    </view>
    <view class="footer" v-if="status === '1' || status === '5'">
      <template v-if="status === '1'">
        <view class="reject" @click="goReject">驳回</view>
        <view class="approve" @tap="handleApprove">通过</view>
      </template>
      <template v-else-if="status === '5'">
        <view class="recall" @click="handleRevoke">撤销</view>
      </template>
    </view>

    <!-- 审批弹窗 -->
    <fui-dialog
      :show="showApproveDialog"
      title="审批意见"
      :buttons="[
        { text: '取消', color: '#666' },
        { text: '通过', color: '#0052D9' },
      ]"
      @close="cancelApprove"
      @click="(e) => e.index === 1 && confirmApprove()"
    >
      <view class="dialog-content">
        <textarea
          v-model="approveOpinion"
          placeholder="请输入审批意见"
          class="opinion-textarea"
        />
      </view>
    </fui-dialog>

    <!-- 撤销确认弹窗 -->
    <fui-dialog
      :show="showRevokeDialog"
      title="确认撤销"
      content="确定要撤销此审批吗？"
      :buttons="[
        { text: '取消', color: '#666' },
        { text: '确定', color: '#ff4d4f' },
      ]"
      @click="(e) => e.index === 1 && confirmRevoke()"
    />
  </view>
</template>

<script setup>
import faultMessage from "./components/faultMessage.vue";
import warrantyCheck from "./components/warrantyCheck.vue";
import service from "./components/service.vue";
import maintenance from "./components/maintenance.vue";
import workload from "./components/workload.vue";
import parts from "./components/parts.vue";
import { ref, onMounted } from "vue";
import {
  approveRepairApply,
  revokeApproval,
} from "@/pages/api/subpkg_index/warranty.js";

const status = ref("");
const showApproveDialog = ref(false);
const approveOpinion = ref("");
const repairId = ref("");
const showRevokeDialog = ref(false);

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  status.value = options.status;
  repairId.value = options.id;
});

const leftClick = () => {
  uni.navigateBack();
};

const handleApprove = () => {
  showApproveDialog.value = true;
};

const cancelApprove = () => {
  showApproveDialog.value = false;
  approveOpinion.value = "";
};

const confirmApprove = async () => {
  if (!approveOpinion.value.trim()) {
    uni.showToast({
      title: "请输入审批意见",
      icon: "none",
    });
    return;
  }

  try {
    const res = await approveRepairApply({
      id: repairId.value,
      reviewComment: approveOpinion.value,
    });

    if (res.code === 200) {
      uni.showToast({
        title: "审批成功",
        icon: "success",
      });
      showApproveDialog.value = false;
      approveOpinion.value = "";
      setTimeout(() => {
        // uni.navigateBack();
        uni.reLaunch({
          url: "/subpkg_index/warranty/index",
        });
      }, 1500);
    } else {
      uni.showToast({
        title: res.msg || "审批失败",
        icon: "none",
      });
    }
  } catch (error) {
    uni.showToast({
      title: "网络错误，请稍后重试",
      icon: "none",
    });
  }
};

const tabs = ref([
  {
    //标签显示文本（String）
    name: "故障信息",
  },
  {
    name: "审核信息",
  },
  {
    name: "处理进度",
  },
  {
    name: "维修信息",
  },
  {
    name: "工作量",
  },
  {
    name: "更换备件",
  },
]);

const checkIndex = ref(0);
const change = (e) => {
  console.log(e);
  checkIndex.value = e.index;
};

function goReject() {
  uni.navigateTo({
    url: "/subpkg_index/warranty/components/RejectPage?id=" + repairId.value,
  });
}

// 处理撤销点击
function handleRevoke() {
  showRevokeDialog.value = true;
}

// 确认撤销
async function confirmRevoke() {
  try {
    const res = await revokeApproval(repairId.value);

    if (res.code === 200) {
      uni.showToast({
        title: "撤销成功",
        icon: "success",
      });

      setTimeout(() => {
        uni.reLaunch({
          url: "/subpkg_index/warranty/index",
        });
      }, 1500);
    } else {
      uni.showToast({
        title: res.msg || "撤销失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("撤销失败：", error);
    uni.showToast({
      title: "网络错误，请稍后重试",
      icon: "none",
    });
  } finally {
    showRevokeDialog.value = false;
  }
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav {
    background-color: #fff;
    padding: 20rpx;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    width: 80%;
    border: 1px solid #0052d9;
    border-radius: 10rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0052d9;
  }

  .reject,
  .approve {
    width: 45%;
    border: 1px solid #0052d9;
    border-radius: 10rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0052d9;
  }
  .reject {
    border-color: #ff4d4f;
    color: #ff4d4f;
  }
  .approve {
    background-color: #0052d9;
    color: #fff;
  }
}
.dialog-content {
  padding: 30rpx;
  .opinion-textarea {
    width: 100%;
    height: 200rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
}
</style>
